<template>
	<canvas type="webgl" id="webgl" style="width: 100vw; height: 100vh" @click='add' @touchstart="touchStart"
		@touchmove="touchMove" @touchend="touchEnd"></canvas>
</template>

<script setup>
import { createScopedThreejs } from 'threejs-miniprogram';
import { onReady } from '@dcloudio/uni-app';
import { registerGLTFLoader } from '@/utils/gltfloader.js';
import registerOrbit from '@/utils/controls.js';
import { Pathfinding, PathfindingHelper } from 'three-pathfinding';

let THREE = null;
let canvas = null;

onReady(() => {
	init();
});

let renderer = null
let scene = null;
let camera = null;
let controls = null
let map = null

async function init() {
	await createThree();
	createRenderer()
	createScene();
	createCamera()
	createLight()
	registerGLTFLoader(THREE)
	//glb纹理需要blob,小程序没有
	map = await loadGLTF('http://10.254.61.107:5175/public/ead.glb');
	// let path_finder = new Pathfinding();
	// map.traverse(item => {
	//     console.log(item.name, '我是item呢')
	//     if (item.name.includes("Navmesh")) {
	//         item.material.visible = false;
	//         console.log(item, '我是item呢');
	//         path_finder.setZoneData('floor_10', Pathfinding.createZone(item.geometry));
	//     }
	// });
	scene.add(map);
	renderer.render(scene, camera);
	createControls()
	animate();
}

function createControls() {
	const orbits = registerOrbit(THREE);
	controls = new orbits.OrbitControls(camera, renderer.domElement);
	controls.minDistance = 5;
	controls.maxPolarAngle = Math.PI / 2.1;
	controls.enableDamping = true;
}

function loadGLTF(url) {
	return new Promise(async (resolve, reject) => {
		await new THREE.GLTFLoader().load(url, (gltf) => {
			// gltf.scene.scale.set(1, 1, 1);
			resolve(gltf.scene);
		});
	});
}

function createThree() {
	return new Promise((resolve) => {
		uni.createSelectorQuery()
			.select('#webgl')
			.node()
			.exec((res) => {
				//canvas做动画时要用
				canvas = res[0].node;
				// 创建一个与 canvas 绑定的 three.js
				THREE = createScopedThreejs(canvas);
				resolve();
			});
	});
}

function createRenderer() {
	renderer = new THREE.WebGLRenderer({
		antialias: true
	});
	renderer.setSize(canvas.width, canvas.height);
	renderer.setClearColor('#AAAAAA', 1.0);
	// renderer.setPixelRatio(window.devicePixelRatio);
}

function createScene() {
	scene = new THREE.Scene();
}

function createCamera() {
	camera = new THREE.PerspectiveCamera(55, canvas.width / canvas.height, 0.1, 1000);
	camera.position.set(30, 30, 30);
	// camera.lookAt(0, 0, 0);
}

function createLight() {
	const light = new THREE.AmbientLight(0xffffff);
	scene.add(light);
}

function animate() {
	//小程序没有window.requestAnimationFrame
	canvas.requestAnimationFrame(animate);
	renderer.render(scene, camera);
	controls.update();
}
function touchMove(e) {
	controls.onTouchMove(e);
}

function touchEnd(e) {
	controls.onTouchEnd(e);
}

function touchStart(e) {
	controls.onTouchStart(e);
}

function add(event) {
	// 点击事件处理
	const raycaster = new THREE.Raycaster();
	raycaster.params.Line.threshold = 0.01; // 设置点的阈值
	const mouse = new THREE.Vector2();
	// 计算鼠标标准化设备坐标
	console.log(canvas, '我是宽高')
	mouse.x = (event.clientX / canvas.width) * 2 - 1;
	mouse.y = -(event.clientY / canvas.height) * 2 + 1;
	raycaster.setFromCamera(mouse, camera);
	// 获取raycaster直线和所有模型相交的数组集合
	const intersects = raycaster.intersectObject(map)
	console.log(intersects, '我笑死了')
}



</script>